<template>
    <div>
        <el-popover placement="left-end" :width="150" trigger="click" :visible-arrow="false" @show="show"   @hide="hide">
            <div slot="reference" class="result flex-center">
                <div class="flv-player-button flex" >
                    <img src="@/assets/images/wi.png"
                        style="width: 15px;height: 15px;cursor: pointer;margin-top: 3px;">
                </div>
            </div>
            <div slot="default" class="flv-player-popover">
                <!-- {{ url }} -->
                <jessibuca :url="url" ref="Jessibuca"></jessibuca>
            </div>

        </el-popover>
    </div>
</template>
<script>


import Jessibuca from "@/components/TZ/Jessibuca";
import { getCamera,  } from "@/api/business/camera";
export default {
    name: "JessibucaBto",
    components: { Jessibuca },
    props: {
        id: {
            type: Number ,
            default: function () {
                return '';
            }
        }
    },
    data() {
        return {
            url:null,
        };
    },
    created() {
        console.log(this.id);
        this.get();
    },
    mounted() {
        this.get();
    },
    unmounted() {

    },
    methods: {
        show(){
            this.$refs.Jessibuca.play();
        },
        hide(){
            this.$refs.Jessibuca.destroy();
        },
        get(){
            getCamera(this.id).then(response => {
                this.url = response.data.cameraUrl;
            });
        }
      
    },
};
</script>
